<template>
	<view class="content">
		<u-modal :show="show" title="提示" content='此操作将取消要预约,是否继续？' @confirm="handleTip" showCancelButton="true"
			@cancel="show=false"></u-modal>
		<u-picker :show="showSelect" :columns="columns" keyName="typeName" @confirm="handleChoose"
			@cancel="showSelect=false"></u-picker>
		<u-picker :show="showSelect1" :columns="columns1" keyName="typeName" @confirm="handleChoose1"
			@cancel="handleCancel1"></u-picker>
		<!-- 顶部搜索 -->
		<view class="search">

			<!-- 搜索框 -->
			<view class="search_con">
				<u-search v-if="searchIndex==0" :showAction="true" placeholder="请输入实验室名称" v-model="form.labName"
					@search="handleSearch(0)" @custom="handleSearch(0)" actionText="搜索" :animation="true"></u-search>
				<u-search v-if="searchIndex==1" :showAction="true" placeholder="请输入预约编号" v-model="form.reservationId"
					@search="handleSearch(1)" @custom="handleSearch(1)" actionText="搜索" :animation="true"></u-search>
			</view>
			<!-- 功能盒子 -->
			<view class="contiue">
				<!-- 预约类型切换按钮 -->
				<view class="change_type" v-if="searchIndex==0&&roleId==1">
					<u-button type="primary" :text="resTypeName" size="mini" @click="handleChooseType"></u-button>
				</view>
				<!-- 搜索模式切换按钮 -->
				<view class="change_type">
					<u-button type="primary" text="搜索模式切换" size="mini" @click="handleSearchModel"></u-button>
				</view>
			</view>
			<!-- 切换组件 -->
			<view class="search_switch" v-if="searchIndex==0">
				<view class="search_item" :class="{act_sItem:index==activeIndex}" @click="handleStatus(index)"
					v-for="(item,index) in typeList" :key="index">{{item}}</view>
			</view>
		</view>


		<!-- 底部要预约列表 -->
		<view class="res_list">
			<u-empty v-if="resList.length==0" mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png"
				text="暂无数据">
			</u-empty>
			<view class="r_list_item" v-for="(item,index) in resList" :key="item.reservationId">
				<!-- 预约类型 -->
				<text class="res_type" v-if="item.type==1">预约类型：<text style="color: #5064eb;">个人预约</text> </text>
				<text class="res_type" v-if="item.type==0">预约类型：<text style="color: #1aa034;">课堂预约</text> </text>

				<!-- 编号 -->
				<text class="item_id">编号：{{item.reservationId}}</text>
				<!-- 过期标签 -->
				<view class="r_iconf" v-if="item.expire">已结束</view>
				<view class="r_title">{{item.lab.labName}}</view>
				<view class="r_time">
					<u-icon name="clock" color="#ccc" size="15"></u-icon>
					<text style="margin-left: 8upx;">{{item.dateTime}}</text>
					<text style="margin-left: 8upx;">{{item.timeOption.start}}~ {{item.timeOption.end}}</text>
				</view>
				<view class="r_status">
					<u-icon name="file-text" color="#06c060" size="18" v-if="item.status==2"></u-icon>
					<text style="color: #06c060;" v-if="item.status==2">预约成功</text>
					<u-icon name="file-text" color="#3c9cff" size="18" v-if="item.status==1"></u-icon>
					<text style="color: #3c9cff;" v-if="item.status==1">待审核</text>
					<u-icon name="file-text" color="#f56c6c" size="18" v-if="item.status==5"></u-icon>
					<text style="color: #f56c6c;" v-if="item.status==5">预约失败</text>
					<u-icon name="file-text" color="#f56c6c" size="18" v-if="item.status==4"></u-icon>
					<text style="color: #f56c6c;" v-if="item.status==4">已取消</text>

				</view>
				<view class="r_btn">
					<view class="btn_item">
						<u-button text="查看详情" size="mini" @click="toDetail(item.reservationId)"></u-button>
					</view>
					<view class="btn_item" v-if="item.status<3&&!item.expire">
						<u-button text="取消预约" @click="cancleRes(item.reservationId,item.status)" size="mini"
							type="error"></u-button>
					</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import {
		getUserRes
	} from '../../api/user.js'
	import {
		cancleRes
	} from '../../api/reservation.js'
	import {
		datesTime,
		countTime
	} from '../../utils/time.js'
	export default {
		data() {
			return {
				resTypeName: "全部类型",
				searchIndex: 0,
				showSelect: false,
				showSelect1: false,
				columns: [
					["全部类型", '个人预约', "课堂预约"]
				],
				columns1: [
					['名称搜索', "编号搜索"]
				],
				activeIndex: 0,
				typeList: [
					"全部",
					"待审核",
					"预约成功",
					"预约失败",
					"已取消"
				],
				resList: [],
				form: {},
				show: false,
				actResId: "",
				actStatus: "",
				roleId: ""
			};
		},
		onLoad() {
			let user = uni.getStorageSync('user')
			let roleId = user.roleId
			this.roleId = roleId
			this.handleGetUserResList()
		},
		methods: {
			// 选择预约类型(默认是个人预约)
			handleChooseType() {
				this.showSelect = true
			},
			// 搜索模式点击事件
			handleSearchModel() {

				this.showSelect1 = true

			},
			// 预约方式取消按钮点击
			handleCancel() {
				this.showSelect = false
			},
			handleCancel1() {
				this.showSelect1 = false
			},
			// 预约方式选择
			handleChoose(data) {
				let index = data.indexs[0]
				if (index == 0) {

					this.form.type = ""
					this.resTypeName = "全部类型"
				} else if (index == 1) {
					this.form.type = 1
					this.resTypeName = "个人预约"
				} else if (index == 2) {
					this.form.type = 0
					this.resTypeName = "课堂预约"
				}
				// 重新请求数据
				this.handleGetUserResList()
				this.showSelect = false
			},
			// 搜索方式切换确认
			handleChoose1(data) {
				let index = data.indexs[0]
				this.searchIndex = index
				if (index == 0) {
					this.form.labName = ""
					this.form.reservationId = ""
					this.form.status = ""
					this.activeIndex = 0
					this.form.type = ""
					// 重新请求数据
					this.handleGetUserResList()

				} else if (index == 1) {
					this.form.labName = ""
					this.form.reservationId = ""
					this.resList = []
					this.form.status = ""
					this.activeIndex = 0
					this.form.type = ""
				}
				this.showSelect1 = false

			},
			handleTip() {
				let reservationId = this.actResId
				let status = this.actStatus
				this.show = false
				cancleRes({
					reservationId,
					status
				}).then(res => {
					uni.$u.toast('预约取消成功')
					// 重新请求数据
					this.handleGetUserResList()
				})
			},
			// 取消预约
			cancleRes(reservationId, status) {
				// console.log(reservationId, status);
				this.actResId = reservationId
				this.actStatus = status
				this.show = true

			},
			//详情
			toDetail(id) {
				uni.navigateTo({
					url: `/pages/res_detail/res_detail?reservationId=${id}`
				})

			},
			handleStatus(index) {
				this.activeIndex = index
				if (index == 0) {
					this.form.status = ""
				} else if (index == 1) {
					this.form.status = 1
				} else if (index == 2) {
					this.form.status = 2
				} else if (index == 3) {
					this.form.status = 5
				} else if (index == 4) {
					this.form.status = 4
				}
				this.handleGetUserResList()
			},
			handleSearch(index) {
				if (index == 1) {

					if (isNaN(this.form.reservationId) || !this.form.reservationId) {
						uni.$u.toast("请输入正确的预约编号")
						return
					}


				}
				this.handleGetUserResList()
			},
			handleGetUserResList() {
				let nowTime = new Date().getTime()
				let user = uni.getStorageSync('user')
				this.form.userId = user.userId
				getUserRes(this.form).then(res => {

					let arr = [...res.data.list]
					arr = arr.reverse()
					let arr1 = [...arr]
					arr1.forEach((item, index) => {
						let a = countTime(item.timeOption.start, item.dateTime)
						if (nowTime > a) {
							// 已过期
							item.expire = true
						}

					})
					this.resList = [...arr1]
					uni.stopPullDownRefresh()

				})
			}
		},
		onShow() {
			this.handleGetUserResList()
		},
		onPullDownRefresh() {
			this.handleGetUserResList()
		},
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		height: 100vh;

		.search {
			width: 100%;
			min-height: 185upx;
			// background-color: pink;
			overflow: hidden;
			box-shadow: 0 3upx 30upx rgba(0, 0, 0, .15);

			.search_con {
				box-sizing: border-box;
				width: 100%;
				padding: 0 20upx;
				margin-top: 30upx;
			}

			.search_switch {
				box-sizing: border-box;
				width: 100%;
				padding: 0 20upx;
				margin-top: 30upx;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;

				.search_item {
					width: 170upx;
					height: 50upx;
					// background-color: #fff;
					text-align: center;
					font-size: 30upx;
					line-height: 50upx;
					border-bottom: 10upx solid transparent;
					font-weight: 700;
				}

				.act_sItem {
					border-bottom: 2px solid #5064eb;
					color: #5064eb;
				}
			}
		}

		.contiue {
			width: 100%;
			height: 50upx;
			display: flex;
			justify-content: flex-start;

			.change_type {
				width: 160upx;
				height: 50upx;
				box-sizing: border-box;
				margin-top: 30upx;
				margin-left: 20rpx;
			}


		}

		.res_list {
			box-sizing: border-box;
			width: 100%;
			height: 85vh;
			// background-color: pink;
			padding: 10upx 20upx;
			overflow: scroll;

			.r_list_item {
				box-sizing: border-box;
				padding: 20upx;
				position: relative;
				width: 100%;
				height: 230upx;
				background-color: #fff;
				border-radius: 20upx;
				margin-bottom: 20upx;
				box-shadow: 1px 0px 10px rgba(0, 0, 0, 0.15);

				.r_iconf {
					position: absolute;
					top: 10upx;
					right: 20upx;
					color: #ccc;
					font-size: 25upx;
				}

				.item_id {
					position: absolute;
					bottom: 10upx;
					left: 20upx;
					color: #ccc;
					font-size: 25upx;
				}

				.res_type {
					position: absolute;
					font-size: 25upx;
					bottom: 10upx;
					left: 160upx;
					color: #ccc;
				}


				.r_title {
					font-size: 30upx;
					font-weight: 700;
				}

				.r_time {
					font-size: 25upx;
					color: #ccc;
					margin-top: 20upx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: flex-start;

				}

				.r_status {
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					font-size: 25upx;
					color: #06c060;
					margin-top: 20upx;
				}

				.r_btn {
					width: 100%;
					height: 50upx;
					// background-color: pink;
					display: flex;
					flex-direction: row;
					justify-content: flex-end;

					.btn_item {
						width: 150upx;
						height: 100%;
						font-size: 25upx;
						text-align: center;

						&:first-child {
							margin-right: 8upx;
						}

					}
				}
			}
		}
	}
</style>